import { Drawer as AntdDrawer } from 'antd'
import './index.less'
import useDrawer from './usDrawer'
/* 
import CustomDrawer from '@/components/antd-comp/drawer/CustomDrawer'
 <CustomDrawer onclose={onclose} width={900} title={'测试'}>
      <div>12</div>
 </CustomDrawer>

 children  内容
 title     标题
 onclose   关闭回调
*/

const CustomDrawer = ({ children, title, onclose, ...props }) => {
  const { visible, showDrawer, closeDrawer } = useDrawer()
  return (
    <>
      {/* <button onClick={showDrawer}>打开抽屉</button> */}
      <AntdDrawer
        /* 自定义icon */
        extra={<span className="drawer-custom-close-button">&times;</span>}
        /* 默认隐藏icon */
        closeIcon={false}
        title={title}
        visible={visible}
        onClose={() => {
          closeDrawer()
          onclose()
        }}
        {...props}
      >
        {children}
      </AntdDrawer>
    </>
  )
}

export default CustomDrawer
